<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字典表</title>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item" style="padding-top: 10px;">
                <div class="layui-input-group">
                    <div class="layui-input-prefix">字典名</div>
                    <input type="text" lay-affix="clear" name="name" placeholder="请输入字典名" autocomplete="off" class="layui-input">
                    <div class="layui-input-prefix">字典code</div>
                    <input type="text" lay-affix="clear" name="code" placeholder="请输入字典code" autocomplete="off" class="layui-input">
                    <div class="layui-input-suffix">
                        <button type="button" class="layui-btn" lay-submit lay-filter="dict-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <div class="layui-card-body">
        <table class="layui-hide" id="dict-table"></table>
    </div>
</div>
</body>
{# 表格操作 #}
<script type="text/html" id="toolbar">
    {% if power.dict_add %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-add">
        <i class="pear-icon pear-icon-add"></i>
        新增
    </button>
    {% endif %}
    {% if power.dict_del %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-remove">
        <i class="pear-icon pear-icon-ashbin"></i>
        删除
    </button>
    {% endif %}
</script>
{# 用户修改操作 #}
<script type="text/html" id="tool">
    <div class="layui-btn-group">
        {% if power.dict_edit %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        {% endif %}
        {% if power.dict_del %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
        {% endif %}
    </div>
</script>
<script>
    layui.use(['table', 'jquery'], function () {
        const table = layui.table;
        const $ = layui.jquery;
        const form = layui.form;

        const logs_columns = () => [[
            {field: 'id', title: 'ID', width: 80, sort: true}
            , {field: 'name', title: '字典名称'}
            , {field: 'code', title: '字典code'}
            , {field: 'enable', title: '是否启用'}
            , {field: 'remark', title: '备注'}
            , {field: 'ca_time', title: '创建时间'}
            , {field: 'up_time', title: '更新时间'}
            , {title: '操作', toolbar: '#tool', align: 'center', width: 130}
        ]];

        table.render({
            elem: '#dict-table',
            cols: logs_columns(),
            parseData: parserTableData,
            url:'/common/api/dictionary',
            skin: 'line', // 表格风格
            even: true,
            page: true, // 是否显示分页
            height: 'full-248',
            limit:20,
            limits:[20,40,60,80,100],
            text: {none: '暂无数据'},
            toolbar: '#toolbar', /*工具栏*/
            defaultToolbar: ['filter', 'print', 'exports'], /*默认工具栏*/
        });

        form.on('submit(dict-query)', function(data) {
            table.reload('dict-table', {where: data.field})
            return false;
        });
});
</script>
</html>